<template>
    <div id="search">
        <!-- <div class="sou">
            <i class="fa fa-search"></i>
            <input type="text" name="sousuo" id="sousuo">
        </div>
        <div class="font">电影/电视剧/综艺</div>
        <div id="now">
            <ul>
                <li>
                    <div class="first">
                        <img src="/images/001.png" alt="">
                    </div>
                    <div class="second">
                        <p class="title">机械师2</p>
                        <p><span class="font-color">剧情，喜剧，犯罪</span></p>
                        <p class="font-color">2020-6-30</p>
                    </div>
                    <div class="third">
                        <p class="score">8.9</p>
                    </div>
                </li>
            </ul>
        </div> -->
        <div>
            <div>
                <i class="fa fa-search"></i>
                <input type="text">
            </div>
        </div>
        <h3>电影/电视剧/综艺</h3>
        <ul>
            <li>
                <div>
                    <img src="/images/001.png">
                </div>
                <div>
                    <p>机械师2</p>
                    <p>剧情，喜剧，犯罪</p>
                    <p>2020-6-30</p>
                </div>
                <div>8.9</div>
            </li>
        </ul>
    </div>
</template>
<script>
export default{
    name:'Search'
}
</script>
<style scoped>
    /* .sou{
        height: 40px;
        width: 80%;
        padding: 10px 10px 0 10px;
        border-bottom: 1px solid #ccc;
    }
    #sousuo{
        width: 80%;
        height: 20px;
        border: 1px solid #ccc;
    }
    .font{
        color: #aaa;
        font-size: 20px;
        padding: 10px;
        width: 95%;
        border-bottom: 1px solid #ccc;
    }
    #now{
        width: 100%;
        padding-bottom: 60px;
    }
    img{
        width: 80px;
    }
    div{
        float: left;
    }
    .first{
        width: 25%;
    }
    .second{
        width: 55%;
        margin-left: 5px;
    }
    .third{
        width: 15%;
        text-align: center;
        line-height: 80px;
    }
    li{
        overflow: hidden;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
    .title{
        font-size: 20px;
        font-weight: bold;
    }
    p{
        line-height: 25px;
        margin-top: 5px;
    }
    .font-color{
        color: #666;
    }
    .score{
        color: #f90;
        margin-left: 5px;
        font-weight: bold;
        font-size: 20px;
    } */

    #search>div{
        background: #f5f5f5;
        padding: 10px;
    }
    #search>div div{
        background: white;
        border-radius: 5px;
        border: 1px solid #ccc;
        padding: 5px;
    }
    input{
        border: none;
        outline: none;
    }
    h3{
        color: #999;
        border-bottom: 1px solid #ccc;
        padding: 5px;
        font-size: 18px;
    }
    li div{
        float: left;
    }
    img{
        width: 80px;
    }
    li{
        overflow: hidden;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
    li div:nth-of-type(2){
        margin-left: 10px;
    }
    li div:last-child{
        float: right;
        color: #fc7103;
    }
    li div:nth-of-type(2) p{
        line-height: 28px;
        font-size: 14px;
    }
    li div:nth-of-type(2) p:first-child{
        font-size: 14px;
    }
</style>